<template>
    <div>
        <div class="box">
            <Topbar2></Topbar2>
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item class="vanimg"><img src="https://ke-image.ljcdn.com/newhouse-user-image/8843adfb3b2784f5c7506ec73c2fa37f.png!m_fill,w_750,h_562,l_fbk" alt=""></van-swipe-item>
                <van-swipe-item class="vanimg"><img src="https://ke-image.ljcdn.com/newhouse-user-image/8843adfb3b2784f5c7506ec73c2fa37f.png!m_fill,w_750,h_562,l_fbk" alt=""></van-swipe-item>
                <van-swipe-item class="vanimg"><img src="https://ke-image.ljcdn.com/newhouse-user-image/8843adfb3b2784f5c7506ec73c2fa37f.png!m_fill,w_750,h_562,l_fbk" alt=""></van-swipe-item>
                <van-swipe-item class="vanimg"><img src="https://ke-image.ljcdn.com/newhouse-user-image/8843adfb3b2784f5c7506ec73c2fa37f.png!m_fill,w_750,h_562,l_fbk" alt=""></van-swipe-item>
            </van-swipe>
            <div class="hfbanner">
                <img class="img3" src="https://img.ljcdn.com/beike/bikanhaofang/1582116185356.png" alt="">
                <div class="hfbanner2">
                    <img class="img4" src="https://img.ljcdn.com/beike/haofanglogo/1571826242637.png" alt="">
                    <span class="tit1">得房率高</span>
                    <img class="img4" src="https://img.ljcdn.com/beike/haofanglogo/1571826242637.png" alt="">
                    <span class="tit1">品质小区</span>
                    <img class="img4" src="https://img.ljcdn.com/beike/haofanglogo/1571826242637.png" alt="">
                    <span class="tit1">店长推荐</span>
                </div>
            </div>
            <div class="bigbox">
                <span>
                    <span class="ss">{{arr.houseSubtitle}}</span>
                </span>
                <h3 class="tit">{{arr.name}}</h3>
                <p class="p2">房源负责人：刘飞</p>
                <div class="pbox">
                    <p class="ps">
                        <span class="reds">{{arr.price}}万元</span><br/><span class="t1">售价</span>
                    </p>
                    <p class="ps">
                        <span class="reds">{{arr.stat}}</span><br/><span class="t1">房型</span>
                    </p>
                    <p class="ps ps1">
                        <span class="reds">{{arr.subtitle}}</span><br/><span class="t1">建筑面积</span>
                    </p>
                </div>
            </div>
            <ul class="ulbox">
                <li class="minli">
                    <span class="sleft">单价：</span>
                    <span class="sright">{{arr.price}}万元</span>
                </li>
                <li class="minli">
                    <span class="sleft">挂牌：</span>
                    <span class="sright">2020.08.21</span>
                </li>
                <li class="minli">
                    <span class="sleft">朝向：</span>
                    <span class="sright">南北</span>
                </li>
                <li class="minli">
                    <span class="sleft">楼层：</span>
                    <span class="sright">低楼层/6层</span>
                </li>
                <li class="minli">
                    <span class="sleft">楼型：</span>
                    <span class="sright">板楼</span>
                </li>
                <li class="minli">
                    <span class="sleft">电梯:</span>
                    <span class="sright">有电梯</span>
                </li>
                <li class="minli">
                    <span class="sleft">装修：</span>
                    <span class="sright">其他</span>
                </li>
                <li class="minli">
                    <span class="sleft">年代：</span>
                    <span class="sright">2002</span>
                </li>
                <li class="minli">
                    <span class="sleft">用户：</span>
                    <span class="sright">普通住宅</span>
                </li>
                <li class="minli">
                    <span class="sleft">权属：</span>
                    <span class="sright">商品房</span>
                </li>
                <li class="minli">
                    <span class="sleft">首付预算：</span>
                    <a  class="sright lright">首付及贷款情况请咨询经纪人</a>
                </li>
                <li class="minli">
                    <span class="sleft">小区：</span>
                    <a class="sright lright">{{arr.name}}</a>
                </li>
            </ul>
            <div class="infobox">
                <div>
                    <div class="hfbox">
                        <img class="hfimg" src="https://img.ljcdn.com/beike/haofanglogo/1571825047606.png" alt="">
                        <p class="hfp1">好房亮点</p>
                    </div>
                    <p class="hfp2">鱼化寨共59套房源入选></p>
                    <div class="dfbox">
                        <img class="dfimg" src="https://image1.ljcdn.com/materials/appindexconf/1514d29d625c2f3a22b6c0997a2e9ecd.png" alt="">
                        <div>
                            <p class="dfp1">得房率高</p>
                            <p class="dfp2">鱼化寨商圈3室在售房源平均得房率77.8%，本房得房率81.3%</p>
                        </div>
                    </div>
                    <div class="pzbox">
                        <img class="dfimg" src="https://image1.ljcdn.com/materials/appindexconf/8dba05da9f2f657da60e031e458c67fe.png" alt="">
                        <div>
                            <p class="pzp1">品质小区</p>
                            <p class="pzp2">人车分流，封闭式管理，24小时保安，非常安全;平均每户车位配比=1.5,较为充足;绿化率42%环境优美</p>
                        </div>
                    </div>
                </div>
                <div class="fybox">
                    <h3 class="fyinfo">房源介绍</h3>
                    <p class="maninfo">
                        此房业主诚心出售 看房方便 精装修 不临街 满三满二复地优尚国际开发商是上海复地有限公司，物业是复瑞物业，一共两期，一期有7栋楼1-7，2010年建成；，二期有4栋楼8-11，2011年建成。物业费1.5元，电费0.49，水费3.8，燃气1.98，供暖费5.8元平。适合刚需客户，房子是小三居，无增值税，可当婚房，房子整体保持和保养的都很好，而且采光好，宽敞明亮。小区距离鱼化寨地铁口一公里，小区西门口经十三路有405公交通过，科技二路也正在修，直通丈八北路。
                    </p>
                </div>
            </div>
            <div class="bottom">
                <div class="bottombj">
                    <h3 class="bottomtit">考虑卖方？我们可以帮你</h3>
                    <p class="bottominfo">30万业主信赖的选择，卖房专业又省心</p>
                    <p class="bottombox">帮我卖房</p>
                    <p class="bottombk"><span class="bk">贝壳号101108657910</span><a class="bka" href="">举报该房源</a></p>
                    <p class="tx">特别提示：本房源所示信息仅供参考，购房时请以该房屋档案登记信息、产权证信息以及所签订合同条款约定为准；本房源公示信息不做为合同条款，不具有合同约束力。</p>
                    </div>
            </div>
        </div>
    </div>
</template>
<script>
import Topbar2 from "com/topbar2.vue"
export default {
     mounted(){
        this.$store.dispatch("listact")
        console.log(this.$store.state.mkandian.obj.data[this.$route.query.thisid])
    },
   components:{
        Topbar2
    },
    data(){
        return{
            arr:this.$store.state.mkandian.obj.data[this.$route.query.thisid]
        }
    
    },
    
}
</script>
<style scopde>
    .vanimg img{
        width: 3.75rem;
        height: 2.2rem;
    }
    .hfbanner{
        background-color: rgb(133, 2, 2);
        display: flex;
        height: 0.5rem;
        border-radius:0.15rem 0.15rem 0 0;
        position: relative;
        top: -0.1rem;
    }
    .img3{
        width: 1rem;
        height: 0.5rem;
        margin-right: 0.2rem;
    }
    .hfbanner2{
        display: flex;
        padding-top: 0.15rem;
    }
    .img4{
        width: 0.14rem;
        height: 0.14rem;
    }
    .tit1{
        font-size: 0.14rem;
        color: #fff;
    }
    .bigbox{
        padding: 0.2rem;
    }
    .pbox{
        display: flex;
        justify-content: space-evenly;
    }
    .ps{
        margin: 0.15rem 0;
        padding-right: 0.1rem;
        border-right: 0.01rem solid #ccc;
    }
    .ss{
        display: inline-block;
        margin-right: 0.05rem;
        font-size: 0.12rem;
        padding: 0.03rem;
        color: #849aae;
        background-color: #edf0f3;
    }
    .tit{
        color: #222;
        font-size: 0.18rem;
        font-weight: bold;
        padding: 0.1rem 0;
    }
    .p2{
        font-size: 0.12rem;
        color: #101d37;
    }
    .reds{
        color: #fa5741;
        font-size: 0.18rem;
        font-weight: bold;
    }
    .t1{
        color: #999;
        font-size: 0.12rem;
    }
    .ps1{
        border: none;
    }
    .ulbox{
        display: flex;
        flex-wrap: wrap;
        padding: 0.1rem 0.2rem;
    }
    .minli{
        min-width: 50%;
    }
    .sleft{
        font-size: 0.16rem;
        color: #999;
        line-height: 0.34rem;
    }
    .sright{
        font-size: 0.16rem;
        color: #222;
        line-height: 0.34rem;
    }
    .lright{
        color: #3072f6;
    }
    .hfbox,.dfbox,.pzbox{
        display: flex;
        margin: 0.1rem 0;
    }
    .infobox{
        padding: 0.22rem;
    }
    .hfimg{
        width: 0.25rem;
        height: 0.25rem;
    }
    .dfimg{
        width: 0.45rem;
        height: 0.45rem;
    }
    .hfp1{
        font-size: 0.2rem;
        color: #222;
        font-weight: bold;
    }
    .hfp2{
        margin: 0.1rem 0 0.3rem;
        font-size: 0.14rem;
        color: #666;
    }
    .dfimg{
        margin-right:0.2rem ;
    }
    .dfp1,.pzp1{
        font-size: 0.16rem;
        font-weight: bold;
        color: #222;
    }
    .dfp2,.pzp2{
        margin: 0.1rem 0;
        font-size: 0.14rem;
        color: #444;
    }
    .fyinfo{
        font-size: 0.2rem;
        color: #222;
        font-weight: bold;
    }
    .maninfo{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin: 0.1rem 0;
        font-size: 0.14rem;
        text-indent: 0.2rem;
        line-height: 0.24rem;
    }
    .bottom{
        background-color: rgb(235, 232, 232);
    }
    .bottombj{
        padding: 0.22rem;
    }
    .bottomtit{
        font-size: 0.18rem;
        color: #222;
        text-align: center;
    }
    .bottominfo{
        font-size: 0.14rem;
        color:#9399a5;
        text-align: center;
    }
    .bottombox{
        height: 0.5rem;
        width: 1.5rem;
        text-align: center;
        padding: 0.15rem;
        margin: 0.3rem auto;
        border: 0.01rem solid rgb(63, 61, 61);
        border-radius: 0.1rem;
    }
    .bottombk{
        display: flex;
        justify-content: space-between;
        margin: 0.15rem 0;
    }
    .bk{
        font-size: 0.12rem;
        color: #666;
    }
    .bka{
        font-size: 0.12rem;
        color: rgba(6, 153, 252, 0.808);
    }
    .tx{
        font-size: 0.12rem;
        color: rgb(221, 217, 217);
    }
</style>